* {margin:0;padding:0;}

.DEBUG {color:grey;}
.WARN {background-color:#ffffee;}
.ERROR, .FATAL {color:red;}

body {font-family:monospace;}

.head {background:linear-gradient(to bottom, #fefefe, #efefef);}
.head h1 {padding:15px 15px 3px 15px;font-size:24px;}
.head dl {padding:0 0 15px 15px;height:24px;}
.head dl dt, .head dl dd {padding:0 8px;height:22px;line-height:22px;float:left;}
.head dl dt {color:#fff;border:1px solid #007a6a;background-color:#007a6a;}
.head dl dd {margin-right:8px;color:#007a6a;border-top:1px solid #007a6a;border-right:1px solid #007a6a;border-bottom:1px solid #007a6a;}
.head .form {padding:8px 15px;height:30px;background-color:#007a6a;}
.head .form input, .head .form button {padding:0 10px;outline:none;}
.head .form input {height:28px;border:1px solid #ffffff;}
.head .form button {height:30px;border:1px solid #ffffff;}

/* common */
.span-head {border-top:1px solid #dddddd;border-left:1px solid #dddddd;border-bottom:1px solid #dddddd;}
.span-head > ol li {padding:2px 10px;list-style:none;}
.span-head > ol li.as-span-id {height:20px;line-height:20px;background-color:#eeeeee;position:relative;}
.span-head > ol li.as-span-id:before {width:25px;height:25px;line-height:25px;font-size:22px;text-align:center;content:"-";background-color:#dddddd;display:block;position:absolute;top:-1px;left:-26px;}
.span-head > ol li.as-service-name,
.span-head > ol li.as-address,
.span-head > ol li.as-start-time {background-color:#ffffee;}
.span-head > ol li.as-address,
.span-head > ol li.as-start-time {border-top:1px dashed #dddddd;}
.span-head > ol li.as-service-name:before {content:"Name: "}
.span-head > ol li.as-address:before {content:"Node: "}
.span-head > ol li.as-start-time:before {content:"From: "}
.span-body > .span-item:nth-child(2n+1) {background-color:#ffffff;}
.span-body > .span-item:nth-child(2n+2) {background-color:#f8f8f8;}
.span-item {border-left:1px solid #dddddd;border-bottom:1px solid #dddddd;}
.span-item-message {padding:6px 10px;}
.span-item-message > ul li {height:20px;line-height:20px;font-size:12px;list-style:none;float:left;}
.span-item-message > ul li.as-time {width:115px;}
.span-item-message ul li.as-left {width:55px;}
.span-item-message p {height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
.span-item-message p.break-word {word-break:break-all;white-space:collapse;height:auto;}
.span-item-stack {padding:0 10px 6px 10px;}
/*! hidden */
.span-hide > .span-head {border-radius:0 3px 0 0;}
.span-hide > .span-head > ol li.as-span-id {color:#ffffff;background-color:#007a6a;}
.span-hide > .span-head > ol li.as-span-id:before {color:#ffffff;content:"+";background-color:#007a6a;border-radius:3px 0 0 3px;}
.span-hide > .span-head {border-color:#007a6a;border-right:1px solid #007a6a;display:inline-block;}
.span-hide > .span-head > ol li.as-address,
.span-hide > .span-head > ol li.as-start-time {display:none;}
.span-hide > .span-body {display:none;}
/*! device */
@media screen and (max-width: 640px) {
    .main {padding:15px 0 125px 40px;}
    .head .form {height:30px;position:relative;}
    .head .form input, .head .form button {position:absolute;top:8px;}
    .head .form input[name="sid"], .head .form input[name="pid"] {display:none;}
    .head .form input[name="tid"] {left:15px;right:125px}
    .head .form button {width:100px;right:15px;}
    .span-item-message ul {color:#999999;}
    .span-item-message p {clear:both;}
    .span-item > .container {margin:0 0 6px 34px;}
    .container > .span:not(:first-child) {margin-top:5px;}
}
@media screen and (min-width: 640px) {
    .main {padding:15px 0 125px 40px;}
    .span-item-message ul {float:left;}
    .span-item-message p {margin-left:160px;}
    .span-item-stack {margin-left:160px;}
    .span-item > .container {margin:0 0 6px 35px;}
    .container > .span:not(:first-child) {margin-top:6px;}
}
